<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        body{
            display: flex;
        }
        .form-control {
            width: 265px;
            display: inline-block;
            height: 40px;
        }

        #docAdd {
            width: 350px;
            border-right: 1px gray solid;
            padding: 10px;
        }

        .docShow {
            flex:1;
        }

        .sm {
            width: 62px;
        }

        .mid {
            width: 92px;
        }

        #docAdd h4 {
            text-align: center;
        }

        textarea {
            width: 300px;
        }

        .lh-1 tr {
            height: 50px;
        }
        .btn-sm{
            margin-right: 30px;
        }
    </style>
</head>
<body>
<div id="docAdd">
    <h4>区县信息录入</h4>
    <form id="countyForm">
        <table class="lh-1" >
            <tr>
                <td>省：</td>
                <td><select id="prov" name="provName" class="form-control"></select></td>
            </tr>
            <tr>
                <td>市：</td>
                <td><select id="city" name="fk_cityId" class="form-control"></select></td>
            </tr>
            <tr>
                <td>县：</td>
                <td><input  type="text" id="county" class="form-control" name="county"/></td>
            </tr>

            <tr>
                <td>备注：</td>
                <td><textarea name="memo"  rows="8" id="memo" class="form-control"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><input type="button" id="btnAdd" class="btn btn-primary btn-sm"
                                                     value="添加">
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="docShow">
    <table class="table table-hover">
        <tr class="table-active">
            <td>编号</td>
            <td>省</td>
            <td>市</td>
            <td>县</td>
            <td>备注</td>
            <td>操作</td>
        </tr>
        <tbody id="tbcounty"></tbody>
    </table>
</div>

<!--js代码-->
<script>
    $(function() {
        $("#btnAdd").on("click", function() {
            addCounty();
        })
        findCountyDesc()
        findProvince();

        $("#prov").on("change", function() {
            findCity(this.value);
        })

    })

    function findProvince() {
        $.get(
            "/prov/findProvince",
            function(plist) {
                addSelect("prov", plist, 'pid', 'provName');
                $("#prov").val(17); //默认设置选中河南
                $("#prov").trigger("change");//触发change事件
            }, 'json'
        )
    }

    function findCity(pid) {
        $.get(
            "/city/findCity", {
                pid: pid
            },
            function(clist) {
                addSelect('city', clist, 'cid', 'city');
                $("#city").val(333); //设置郑州为默认
                $("#city").trigger("change");
            }, 'json'
        );
    }


    function addCounty(){
        $.post(
            "/county/countyAdd",
            $("#countyForm").serialize(),
            function (n){
                findCountyDesc();
            }
        )
    }

    function findCountyDesc() {
        $.get(
            "/county/findCountyDesc",
            function(dlist) {

                let tb = $("#tbcounty");
                tb.empty();
                for (let i in dlist) {
                    let tr = `<tr>
                                   <td>${dlist[i].couId} </td>
                                   <td>${dlist[i].provName} </td>
                                   <td>${dlist[i].city} </td>
                                   <td>${dlist[i].county} </td>
                                   <td>${dlist[i].memo} </td>
                                   <td><button type="button" onclick="countyDel(${dlist[i].couId})"
                                    class="btn btn-primary btn-sm">删除</button>
                                   </td>
                                </tr>`;
                    tb.append(tr);
                }
            }, 'json'
        );
    }

    function countyDel(mid) {
        let del=confirm("你真的要删除这个县么？");
        if(!del){
            return;
        }
        $.get(
            '/county/countyDel', {
                couId: mid
            },
            function(n) {
                findCountyDesc();
            }
        );
    }
</script>

</body>
</html>